<template>
	<view class="personal" >
		<view class="personal_nav" :style="{ paddingTop: StatusBar + 'px' }">
			<view class="header_box">
				<view class="header_back" @click="navigateBack()">
					<text class="iconfont icon-Left"></text>
				</view>
				<view class="header_title">个人资料管理</view>
			</view>
			<view class="nav_avatar">
				<view class="avatar_image" @click="uploadAvatar">
					<image :src="details_data.img" mode=""></image>
					<view class="avatar_btn"></view>
				</view>
				
			</view>
		</view>
		<view class="personal_box">
			<view class="box_item">
				<view class="item_name">昵称</view>
				<view class="item_input">
					<u-input v-model="details_data.name" border="false" placeholder="昵称" @change="user_data()" />
				</view>
			</view>
			<view class="box_item">
				<view class="item_name">淘气游ID</view>
				<view class="item_input">
					<u-input v-model="details_data.id" disabled border="false" placeholder="淘气游ID" />
				</view>
			</view>
			<view class="box_item">
				<view class="item_name">绑定手机</view>
				<view class="item_input">
					<u-input v-model="details_data.phone" disabled border="false" placeholder="绑定手机" />
				</view>
			</view>
		</view>
	<!-- 	<view class="personal_btn">
			<view class="btn_content">
				<view class="content_back">取消</view>
				<view class="content_edit" @click="user_data()">保存</view>
			</view>
		</view> -->
	</view>
</template>

<script>
import { user_details, user_data } from '@/api/user'
	export default {
		data() {
			return {
				details_data: {},
				StatusBar: this.StatusBar,
				value: ''
			}
		},
		onLoad() {
			this.user_details()
		},
		methods: {
			async user_details(){
				let data = await user_details()
				if(data){
					this.details_data = data.data
				}
			},
			async user_data(){
				let data = await user_data(this.details_data)
				if(data){
					
				}
			},
			
			uploadAvatar() {
				uni.chooseImage({
				        count: 1, // 默认为1，只选择一张图片
				        success: chooseImageRes => {
							uni.showLoading({
								title: '上传中...'
							});
				          const tempFilePaths = chooseImageRes.tempFilePaths;
				          const uploadTask = uni.uploadFile({
				            url: 'http://192.168.3.17:5001/m/user/upload_img', // 你的上传接口地址
				            filePath: tempFilePaths[0],
				            name: 'file', // 这里根据后端需要的字段来定义
				            formData: {},
				            success: uploadRes => {
								uni.hideLoading();
								uploadRes = JSON.parse(uploadRes.data)
				              // 上传成功处理逻辑
				              this.details_data.img = uploadRes.data
							  this.user_data()
				            },
				            fail: uploadError => {
								uni.hideLoading();
				              // 上传失败处理逻辑
				              console.log('upload fail:', uploadError);
				            }
				          });
				          // 监听上传进度变化
				          uploadTask.onProgressUpdate(progressEvent => {
							  uni.updateLoading({
							      title: '上传进度' + progressEvent.progress + '%'
							  });
				          });
				        },
				        fail: chooseImageError => {
				          // 选择图片失败处理逻辑
				          console.log('choose image fail:', chooseImageError);
				        }
				      });
			}
		}
	}
</script>

<style>

</style>

<style lang="scss" scoped>
.personal {

	.personal_nav {
		width: 100%;
		background: linear-gradient(93deg, #DCFFEE 0%, #C6ECFD 100%);
		background-size: 100%;
		padding-bottom: 96rpx;
		.header_box {
			display: flex;
			align-items: center;
			padding: 28rpx 32rpx;
			position: relative;
			font-weight: bold;
			.header_back {
				margin-left: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.header_title {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
		.nav_avatar {
			margin-top: 50rpx ;
			.avatar_image {
				position: relative;
				margin: 0 auto;
				width: 176rpx;
				height: 176rpx;
				border-radius: 50%;
				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					overflow: hidden;
				}
				.avatar_btn {
					position: absolute;
					bottom: 0;
					right: -10rpx;
					width: 56rpx;
					height: 56rpx;
					background: url(~@/static/personal/sctx.png) no-repeat;
					background-size: 100%;
				}
			}
			
		}
	}
	.personal_box {
		z-index: 999;
		background: #fff;
		margin-top: -48rpx;
		flex: 1;
		box-sizing: border-box;
		padding: 0 56rpx;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		overflow: hidden;
		.box_item {
			.item_name {
				margin-top: 44rpx;
				font-size: 28rpx;
				color: #22150B;
				font-weight: bold;
			}
			.item_input {
				margin-top: 24rpx;
				width: 638rpx;
				height: 80rpx;
				background: #F3F4F9;
				border-radius: 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				overflow: hidden;
			}
		}
	}
	.personal_btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 184rpx;
		background: #FFFFFF;
		box-shadow: -8rpx 0rpx 8rpx 0rpx rgba(236,225,214,0.34);
		.btn_content {
			margin-top: 20rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			.content_back {
				width: 252rpx;
				height: 88rpx;
				border-radius: 100rpx 100rpx 100rpx 100rpx;
				border: 4rpx solid #FDD637;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #FFCD00;
				margin: 0 8rpx;
				box-sizing: border-box;
			}
			.content_edit {
				width: 418rpx;
				height: 88rpx;
				background: #FDD637;
				border-radius: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #22150B;
				font-weight: bold;
				margin: 0 8rpx;
			}
		}
	}
}

</style>
